import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity,
	PixelRatio, TextInput
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import JsonUtils from '../../../../utils/JsonUtils';
const scale = GLOBAL.SCALE;
export class SelectComponent extends Component {
	constructor(props) {
		super(props);
	}

	_callBack () {
		this.props.callBack && this.props.callBack();
	}
	_rightHrefFn () {
		this.props.rightHrefFn && this.props.rightHrefFn();
	}
	_titleImgCallBack () {
		this.props.titleImgCallBack && this.props.titleImgCallBack();
	}
	/* 
		name:标题
		value：值
		callBack：select 点击时候触发
		onoff：是否有底部1px 线   true 无线   false/默认  有线 
		type：是 select（类型）  还是输入框  input（类型）    值：input   默认为select（类型）
		icon ： 当type为 input才有效   比如金额前面的  ￥
		rightText: 右侧 文字传递   没有默认右侧箭头,
		rightHref:顶部右侧链接
		rightHrefFn:顶部右侧链接 点击函数
		editable :    //禁止用户输入   // false 代表 禁用
		titleImg:true  在标题后面添加一个问号图标
		keyboardType // 键盘弹起的类型
	*/
	render () {
		let { name, value, callBack, onoff,
			type, icon, rightText, rightHref,
			rightHrefFn, inputFn, onFocusFn,
			editable, titleImg, titleImgCallBack, regexp, maxLength, keyboardType, refStr, returnKeyType, onBlurFn } = this.props;
		let titleImgObj = require('../../../../imgs/global/query.png')
		return (
			<View style={styles.listItem}>
				{
					name ?
						<View style={styles.listHead}>
							<View style={{ flexDirection: 'row', alignItems: 'center' }}>
								<Text style={styles.listText}>{name}</Text>
								{
									titleImg ? (
										<TouchableOpacity onPress={() => { this._titleImgCallBack() }}>
											<Image source={titleImgObj} style={styles.titleImg} />
										</TouchableOpacity>
									) : null
								}
							</View>
							<TouchableOpacity onPress={() => { this._rightHrefFn() }}>
								<Text style={styles.listRight}>{rightHref}</Text>
							</TouchableOpacity>
						</View>
						: null
				}
				<TouchableOpacity style={[styles.listNr, this.props.listNrStyles, onoff ? styles.listNrActive : null]} onPress={() => { this._callBack(); }} >
					{
						type != 'input' ? (<Text style={styles.listTitle}>{value}</Text>) : (
							<View style={styles.inputBox}>
								<Text style={styles.listTitle}>{icon}</Text>
								<TextInput
									editable={editable}
									ref={refStr}
									style={styles.listInput}
									underlineColorAndroid='transparent'
									placeholderTextColor="#BFBFBF"
									maxLength={maxLength || 30}
									keyboardType={keyboardType || 'default'}
									returnKeyType={returnKeyType}
									onBlur={() => {
										onBlurFn && onBlurFn()
									}}
									//value={value}
									defaultValue={JsonUtils.valueToString(value)}
									onChangeText={(text) => {
										////let newText = text.replace(/[^\d]+/, ''); //影响输入
										//this.setState({ value: newText });
										inputFn && inputFn(text);
									}}
									onFocus={() => {
										onFocusFn && onFocusFn();
									}}
								/>
							</View>
						)
					}
					{type == 'input' ? (rightText ? (<Text style={[styles.listText, styles.oldAdd]}>{rightText}</Text>) : null) : <Image style={styles.arrowLeft} source={require('../../../../imgs/arrow-left.png')} />}
				</TouchableOpacity>
			</View >
		)
	}
}
const styles = StyleSheet.create({
	listItem: {
		flex: 1
	},
	listText: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		height: 17 * scale,
		lineHeight: 17 * scale,
		marginTop: 17 * scale
	},
	listNr: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		height: 40 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
	},
	listNrActive: {
		borderBottomWidth: 0,
	},
	arrowLeft: {
		width: 6 * scale,
		height: 11 * scale
	},
	listTitle: {
		fontSize: 13 * scale,
		color: style.color.dark,
		marginRight: 3 * scale
	},
	listInput: {
		width: '95%',
		color: style.color.dark,
		paddingLeft: 0,
		height: 40 * scale
	},
	inputBox: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	listHead: {
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'space-between'
	},
	listRight: {
		fontSize: 12 * scale,
		color: style.color.cerulean
	},
	tHeadRight: {
		fontSize: 12 * scale,
		color: style.color.cerulean
	},
	titleImg: { width: 12 * scale, height: 12 * scale, marginTop: 17 * scale, marginLeft: 7 * scale },
	oldAdd: {
		position: 'absolute',
		right: 0,
		top: -5 * scale,
	}
})